<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>添加新闻</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <link rel="stylesheet" href="/public/static/css/font.css" />
    <link rel="stylesheet" href="/public/static/css/weadmin.css" />
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .layui-input-inline.chuansuo {
        width: 700px;
      }
    </style>
  </head>

  <body>
    <div class="weadmin-body">
      <form class="layui-form">
        <div class="layui-form-item">
          <label for="title" class="layui-form-label">
            <span class="we-red">*</span>标题
          </label>
          <div class="layui-input-inline">
            <input
              type="text"
              value=""
              id="title"
              name="title"
              required=""
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="layui-form-mid layui-word-aux">
            <span class="we-red">*</span>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"
            ><span class="we-red">*</span>类别</label
          >
          <div class="layui-input-block">
            <% categoryList.forEach((item,index)=>{ %> <input type="radio"
            name="category_id" value="<%- item.id %>" lay-skin="primary"
            title="<%- item.name %>" <%
            if(newsinfo.categoryid===categoryList[index].id) { %> checked="true"
            <% } %> /> <% }) %>
          </div>
        </div>
        <div class="layui-form-item">
          <label for="author" class="layui-form-label">
            <span class="we-red">*</span>作者
          </label>
          <div class="layui-input-inline">
            <input
              type="text"
              value=""
              id="author"
              name="author"
              required=""
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="layui-form-mid layui-word-aux">
            <span class="we-red">*</span>
          </div>
        </div>
        <div class="layui-form-item">
          <label for="content" class="layui-form-label">
            <span class="we-red">*</span>内容
          </label>
          <div class="layui-input-inline chuansuo" id="div3"></div>
          <div class="layui-form-mid layui-word-aux">
            <span class="we-red">*</span>
          </div>
        </div>

        <div class="layui-form-item">
          <label for="pubtime" class="layui-form-label">
            <span class="we-red">*</span>发布时间
          </label>
          <div class="layui-input-inline">
            <input
              type="text"
              value=""
              id="pubtime"
              name="pubtime"
              required=""
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="layui-form-mid layui-word-aux">
            <span class="we-red">*</span>
          </div>
        </div>

        <div class="layui-form-item">
          <button class="layui-btn" lay-filter="submit" lay-submit="">
            提交
          </button>
        </div>
      </form>
    </div>
    <script src="/public/lib/layui/layui.js" charset="utf-8"></script>
    <script
      src="/public/javascripts/wangEditor.min.js"
      charset="utf-8"
    ></script>
    <script type="text/javascript">
      layui.extend({
        admin: '{/}/public/static/js/admin',
      })
      layui.use(
        ['form', 'layer', 'admin', 'upload', 'jquery', 'transfer', 'laydate'],
        function () {
          var form = layui.form,
            admin = layui.admin,
            layer = layui.layer,
            upload = layui.upload,
            transfer = layui.transfer,
            laydate = layui.laydate,
            $ = layui.jquery

          var E = window.wangEditor
          var editor = new E('#div3')

          // editor.customConfig.onchange = function (html) {
          //   $('#div4').html(html)
          // }
          editor.create()

          //自定义验证规则
          form.verify({
            nikename: function (value) {
              if (value.length < 5) {
                return '昵称至少得5个字符啊'
              }
            },
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            repass: function (value) {
              if ($('#L_pass').val() != $('#L_repass').val()) {
                return '两次密码不一致'
              }
            },
          })

          //执行一个laydate实例
          laydate.render({
            elem: '#pubtime', //指定元素
            value: new Date(),
          })

          //监听提交
          form.on('submit(submit)', function (data) {
            const tt = editor.txt.html()

            //发异步，把数据提交给php
            const sendData = {
              ...data.field,
              content: editor.txt.html(),
            }

            $.ajax({
              url: '/admin/news/add',
              data: JSON.stringify(sendData),
              type: 'POST',
              // ajax 传数组对象，要改contentType 为 json
              contentType: 'application/json; charset=utf-8',
              success: function (res) {
                if (res.code === 1) {
                  layer.msg(res.msg)
                  console.log(res)
                } else {
                  layer.alert('提交成功', { icon: 6 }, function () {
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name)
                    //关闭当前frame
                    parent.layer.close(index)
                    // 将frame的上一层刷新
                    window.parent.location.reload()
                  })
                }
              },
            })

            return false
          })
        }
      )
    </script>
  </body>
</html>
